<template>
    <view class="myP">

      <u-navbar :is-back="false" title="个人中心" back-text='123' >
      <view class="slot-right" style="width: 100%;display: flex;justify-content: flex-end;" >
				<view>
                <img @click="goSettingM" style="width: 1rem;padding: 1rem;" src="../../style/image/my/A20.png" alt="">
                </view>
			</view>
      </u-navbar>

        <view class="my-header" >

            <view class="my-header-t">

            <view style="display: flex;align-items: center;">

              <u-avatar :src="src" mode="circle"></u-avatar>
               
                <view style="padding: 0rem 0.5rem;">

                <view style="font-size: 0.89rem;font-family: PingFang SC;font-weight: bold;color: #FFFFFF;" >SHAW-SEA</view>

                <view style="display: flex;align-items: center;" >
                    <img style="width: 1rem;" src="../../style/image/my/A16.png" alt="">
                    <view style="font-size: 0.78rem;font-family: PingFang SC;font-weight: 400;color: #FFFFFF;" >普通会员</view>
                </view>


                </view>
            
            </view>
              

                <view>
                    <img style="width: 7rem;" src="../../style/image/my/A21.png" alt="">
                </view>

            </view>

            <view style="display: flex;margin: 1rem 0.5rem 0.5rem 0.5rem;align-items: center;" >
            <view style="font-size: 0.73rem;font-family: PingFang SC;font-weight: 400;color: #FFFFFF;" >我的余额</view>
            <view style="background: white;padding: 0.1rem 0.5rem;margin-left: 0.5rem;border-radius: 5px;color: #03c080;" >提现</view>
            </view>

            <view class="yuE" >2878789.00元</view>

        </view>

        <view class="my-list">

            <view class="my-list-item" v-for="(item,index) in myList " :key="index" >
                
                <view style="display: flex;align-items: center;">
                    <img style="width:1rem" :src="item.img" alt="">
                    <view style="font-size: 0.89rem;font-family: PingFang SC;font-weight: 399;color: rgb(104, 104, 104);margin-left:1rem" >{{item.value}}</view>
                </view>

                
                  <view style="display: flex;" >
                     <view v-show="item.type=='customer' " style="margin-right: 1rem;font-size: 0.78rem;font-family: PingFang SC;font-weight: 300;color: #9A9A9A;" >878989099</view>
                      <img style="width: 0.5rem;height:0.8rem" src="../../style/image/my/A15.png" alt="">
                  </view>
                  
               

            </view>
        
        </view>




     <bar></bar>
    </view>
</template>

<script lang='ts' >

 import { Component, Prop,Vue, Watch ,Emit} from 'vue-property-decorator'
import bar from "../home/topbar.vue";

 @Component({     //   @Component  是一个装修器   不可以在下面写语句
        name: 'test',
          components: {
          bar
          }
    })


    export default class extends Vue {
 
     @Prop({
            type: String, // 父组件传递给子组件的数据类型
            required: false, // 是否必填
            default: ' ' // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
        }) msg!:string;


        myList=[
            {
                img:require('../../style/image/my/A7.png'),
                value:'我的订单',
            },
             {
                img:require('../../style/image/my/A9.png'),
                value:'收货地址',
            },
            //  {
            //     img:require('../../style/image/my/订单.png'),
            //     value:'我的订单',
            // },
             {
                img:require('../../style/image/my/A22.png'),
                value:'实名认证',
            },
             {
                img:require('../../style/image/my/A13.png'),
                value:'账号信息',
            },
             {
                img:require('../../style/image/my/A8.png'),
                value:'型号说明',
            },
             {
                img:require('../../style/image/my/A24.png'),
                value:'常见问题',
            },
             {
                img:require('../../style/image/my/A12.png'),
                value:'关于我们',
            },
             {  
                type:"customer",
                img:require('../../style/image/my/A25.png'),
                value:'专属客服',
            }
        ]
       
         created() {
          }

          mounted() {
              //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
          }

          goSettingM(){
          
            console.log(123213)

              uni.navigateTo({
        url: "../set/index",
      });


          }

    }
</script>

<style  scoped>


	.slot-wrap {
		display: flex;
		align-items: center;
         flex: 1;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		/* flex: 1; */
		/* 如果您想让slot内容与导航栏左右有空隙 */
		/* padding: 0 30rpx; */
	}

.myP{
 margin: 0rem 0.5rem;
}

.my-header{
    background-image: url('../../style/image/my/A11.png');
    border-radius: 0.8rem;
    background-position: center;
    background-repeat: round;
    background-repeat: no-repeat;
    padding: 1rem 0rem 1rem 0.3rem;

}
.my-header-t{
  

    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 0.5rem;
}

.yuE{

font-size: 0.83rem;
font-family: PingFang SC;
font-weight: 300;
color: #FFFFFF;
margin: 1rem 0.5rem 0.5rem;
}


.my-list-item{

    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 0.1rem 0.1rem 0.5rem 0.1rem;
    margin: 0.5rem;
}
</style>